<script setup>
import ShopInfo from "@/components/ShopInfo.vue";
import Product from "@/components/Product.vue";
import CarButton from "./CartButton.vue";
import { ref, computed } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useShopInfoStore } from "@/stores/shop.js";
const shop = useShopInfoStore();
const router = useRouter();
const route = useRoute();
const id = route.query.id;
//所有商家数据
const nearbyList = shop.nearbyList;
// 当前商家所有数据
const currentNearByList = nearbyList.find((item) => {
  return item.id == id;
});

// 左侧商品列名称
let arr = ["全部商品"];
const categoryName = currentNearByList.category.forEach((item, index) => {
  arr.push(item.name);
});
// 左侧边栏高亮索引
const currentIndex = ref(0);

// 获取当前商家所有商品数据
let shopData = ref([]);
const shopDataFunction = () => {
  currentNearByList.category.forEach((item) => {
    shopData.value.push(...item.list);
  });
};
shopDataFunction();
// console.log(shopData.value);

// 全部商品
const allProduct = computed(() => {
  let arr = [];
  currentNearByList.category.forEach((item) => {
    arr = [...arr, ...item.list];
  });
  return arr;
});

// 修改左侧边栏高亮索引
const alterCurrentIndex = (index) => {
  currentIndex.value = index;
  if (index === 0) {
    shopData.value = allProduct.value;
  } else {
    shopData.value = currentNearByList.category[index - 1].list;
  }
};
</script>

<template>
  <div class="shop">
    <!-- 搜索 -->
    <div class="search">
      <span class="iconfont search_back" @click="router.go(-1)">&#xe697;</span>
      <div class="search_content">
        <span class="iconfont search_content_icon">&#xe632;</span>
        <input
          type="text"
          class="search_content_input"
          placeholder="请输入商品名称"
        />
      </div>
    </div>
    <!-- 商店信息 -->
    <div class="shop_info">
      <ShopInfo :currentNearByList="currentNearByList"></ShopInfo>
    </div>
    <!-- 内容 -->
    <div class="content">
      <div class="category">
        <div
          class="category_item"
          v-for="(item, index) in arr"
          :key="index"
          :class="{
            'category_item--active': currentIndex == index,
          }"
          @click="alterCurrentIndex(index)"
        >
          {{ item }}
        </div>
      </div>
      <div class="product">
        <div  v-for="item in shopData" :key="item.title">
          <product :shopData="item" :shopName="currentNearByList.name">
              <div class="product_content_sales">月售 {{ item.sales }} 件</div>
          </product>
        </div>
      </div>
    </div>
    <!-- 购物车底部 -->
    <CarButton :productName="currentNearByList.name"></CarButton>
  </div>
</template>

<style lang="scss" scoped>
@import "@/style/viriables.scss";
.shop {
  //搜索
  .search {
    margin: 0.18rem;
    display: flex;
    align-items: center;

    &_back {
      font-size: 0.24rem;
      margin-right: 0.08rem;
      color: #b6b6b6;
    }
    &_content {
      flex: 1;
      height: 0.32rem;
      background-color: #f5f5f5;
      border-radius: 0.16rem;
      display: flex;
      align-items: center;

      &_icon {
        color: #b6b6b6;
        margin: 0 0.12rem;
      }
      &_input {
        border: none;
        outline: none;
        background: none;
        width: 100%;
        height: 0.32rem;
      }
    }
  }
  //商店信息
  .shop_info {
    margin: 0 0.18rem;
  }
  // 内容
  .content {
    position: absolute;
    left: 0;
    right: 0;
    top: 1.7rem;
    bottom: 0.5rem;
    display: flex;

    .category {
      overflow-y: scroll;
      width: 0.78rem;
      background-color: #f5f5f5;

      &_item {
        line-height: 0.4rem;
        font-size: 0.14rem;
        text-align: center;
        color: $content_fontcolor;

        &--active {
          background-color: $bgColor;
        }
      }
    }
    .product {
      flex: 1;
      overflow-y: scroll;
    }
  }
}
</style>